
import React from 'react'
import {Form,Modal,Input,Message} from 'antd'
import store from "./store";
import {AddModule} from "../../../../api/work/system/RuleApi";
import { observer } from 'mobx-react';

@observer
class AddModuleForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loading:false
        }
    }

    handleSubmit = () => {
        this.props.form.validateFields((error,formData) => {
            if (!error) {
                formData["id"] = store.record.id ? store.record.id : null;
                formData["pid"] = 0;
                formData["type"] = 1;
                formData["sub_type"] = 0;
                AddModule(formData).then(response => {
                    if (response.data.code === 200){
                        store.fetchRecords();
                        Message.success(response.data.msg);
                        store.addModuleVisible = false;
                        store.record = {};
                    }
                })
            }
        })
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const record = store.record;
        console.log(record)
        return (
            <Modal
                visible
                width={800}
                maskClosable={false}
                title={ record.id ? "编辑模块" : "新建模块"}
                onCancel={() => {store.addModuleVisible = false;store.record={}}}
                confirmLoading={this.state.loading}
                onOk={this.handleSubmit}>
                <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
                    <Form.Item  label="模块">
                        {getFieldDecorator('route', {initialValue: record.key,rules: [{required:true,message:"模块路由不能为空"}]})(
                            <Input placeholder="请输入模块路由" required />
                        )}
                    </Form.Item>
                    <Form.Item label="标题">
                        {getFieldDecorator('title', {initialValue: record.label,rules: [{required:true,message:"模块标题不能为空"}]})(
                            <Input placeholder="请输入模块标题"/>
                        )}
                    </Form.Item>
                    <Form.Item label="图标">
                        {getFieldDecorator('icon', {initialValue: record.icon,rules: [{required:true,message:"模块图标不能为空"}]})(
                            <Input placeholder="请输入模块图标"/>
                        )}
                    </Form.Item>
                    <Form.Item label="排序">
                        {getFieldDecorator('sort', {initialValue: record.sort ? record.sort : 1,rules: [{required:true,message:"模块排序不能为空"}]})(
                            <Input placeholder="请输入模块排序"/>
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

export default Form.create()(AddModuleForm);
